<template>
  <div>
    <el-row :gutter="20">
      <!--历史数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="时间">
            <el-date-picker
              v-model="dateRange"
              :clearable="false"
              :editable="false"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
        <span v-if="pointParamList.length==0">该站点无数据参数</span>
        <el-table v-loading="loading" :stripe="true" :data="hisMainList" :max-height="430" v-show="pointParamList.length>0">
          <el-table-column width="180" :label="`时　间`" align="center" prop="collecTimes" />
          <el-table-column min-width="120"
                           v-for="pointParam in pointParamList"
                           :key="pointParam.id"
                           :label="pointParam.paramInfo.name+`\n`+pointParam.paramInfo.unit"
                           :prop="`param${(pointParam.paramId)}`"
                           align="center">
            <template v-slot="scope">
              <span v-html="scope.row[`param${(pointParam.paramId)}`]"></span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0 && pointParamList.length>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { listPointParam } from "@/api/basic/pointParam";
  import { listHisMain } from "@/api/basic/hisMain";

  export default {
    props: {
      collectPoint: {
        type: Object
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        pointParamList: [],
        // 实时数据主表表格数据
        hisMainList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        pointId : undefined,
        // 日期范围
        dateRange: "",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          pointId: this.collectPoint.id
        },
        queryParamsParam: {
          pageNum: 1,
          pageSize: 100,
          pointId: this.collectPoint.id,
          paramType: 'num'
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    watch:{
      collectPoint(val) {
        this.queryParams.pointId = this.collectPoint.id;
        this.queryParamsParam.pointId = this.collectPoint.id;
        this.getSiteFactor();
      }
    },
    computed: {
      tabHt(){
        return this.$store.state.app.tableHeight.htp
      }
    },
    mounted() {
      let nowDate = new Date();
      let befDate = new Date(nowDate.getTime() + 1 * 24 * 3600 * 1000);
      let byear = befDate.getFullYear();
      let bmonth = befDate.getMonth() + 1;
      let bday = befDate.getDate();
      let endTime = `${byear}-${bmonth}-${bday}`;
      // 向前推迟一周的时间点
      befDate = new Date(nowDate.getTime() - 7 * 24 * 3600 * 1000);
      byear = befDate.getFullYear();
      bmonth = befDate.getMonth() + 1;
      bday = befDate.getDate();
      let startTime = `${byear}-${bmonth}-${bday}`;
      this.dateRange = [startTime,endTime];
    },
    created() {
      this.getSiteFactor();
    },
    methods: {
      getList(){
        this.loading = true;
        listHisMain(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.hisMainList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询站点参数关联列表 */
      getSiteFactor() {
        listPointParam(this.queryParamsParam).then(response => {
          this.pointParamList = response.rows;
          this.getList();
        });
      },
      dataFormatter: function (row, column, cellValue, index) {
        // let values = row[column.property];
        let value = cellValue.split("|")
        return value[0];
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      }
    }
  };
</script>

<style scoped lang="scss">
  ::v-deep{
    .el-form-item{
      margin-bottom: 10px;
    }
  }
</style>
